import TitleCard from "@/pages/components/TitleCard";
import ChartCard from "./ChartCard";
import { pieChartColorEnum } from "@/enums/pieChart.enum";
import SelectCard from "./SelectCard";

const ExpenditureChartCard = () => {
  const option = {
    tooltip: { trigger: "item" },
    legend: { left: "left", orient: "vertical", itemWidth: 70, itemHeight: 20 },
    color: [
      pieChartColorEnum.primary,
      pieChartColorEnum.success,
      pieChartColorEnum.warning,
      pieChartColorEnum.error,
      pieChartColorEnum.info,
    ],
    series: [
      {
        name: "支出占比",
        type: "pie",
        data: [
          { value: 30, name: "房款" },
          { value: 18, name: "车位款" },
          { value: 18, name: "租金" },
          { value: 22, name: "工程款" },
          { value: 12, name: "代理费" },
        ],
        tooltip: {
          valueFormatter: (value: number) => value + "%",
        },
      },
    ],
  };
  const selectCardParams = {
    label: "类型",
    onChange: () => {},
    options: [
      { value: "jack", label: "Jack" },
      { value: "lucy", label: "Lucy" },
      { value: "Yiminghe", label: "yiminghe" },
      { value: "disabled", label: "Disabled" },
    ],
  };
  return (
    <div>
      <TitleCard title="支出类型占比">
        <SelectCard {...selectCardParams} />
      </TitleCard>
      <div className="mt-24">
        <ChartCard option={option} className="!h-450"></ChartCard>
      </div>
    </div>
  );
};
export default ExpenditureChartCard;
